
.pull-left{
    float:left;
}
.pull-right{
    float:right;
}
.f-oh{
    overflow: hidden;
}

//create by Jason
html,body,ol,ul{
    padding: 0;
    margin: 0;

    overflow: hidden;
}
html,body{
    height: 100%;
}
li{
    list-style: none;
}

#main,.main,#video_container,#main_realreal{
    height:100%;
    overflow: hidden;
}
#main_realreal{
    background:#f1f5f8 url('./images/clouds.png') no-repeat right bottom;
    background-size: 70%;
    .realreal-content-box{
        position: absolute;
        left: 280px;
        top: 0;
        right: 0;
        bottom: 0;
        text-align: center;
        .logo{
            max-width: 80px;
            padding-top: 20%;
        }
        ul{
            li{
                line-height: 46px;
                font-size:24px !important;
                color:#052b48;
                span{
                    font-size: 12px;

                    padding: 0 5px;
                }
                b{
                    font-weight: normal;
                }
            }
        }
    }
}
video{
    background: black;
    object-fit: cover;
}

.localVideo {
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -moz-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    transform: scale(-1, 1);
    transition: opacity 1s;
    width: 100%;
}
.main{
    position: relative;
    //正在呼叫模块
    #calling-module{
        position: absolute;
        left:0;
        top:0;
        z-index: 9;
        background: white;
        height: 100%;
        width: 280px;
        padding: 10px 20px;
        box-sizing: border-box;
        text-align: center;

        .cur-calling-user{
            padding-top: 15%;
            padding-bottom: 10%;
            font-weight: normal;




        }
        .calling-text{
            padding-top: 8%;
            padding-bottom: 3%;
            font-size: 20px;
            line-height: 36px;
        }
        .calling-flash{
            padding-top: 18%;
            padding-bottom: 8%;
        }

        .user-avatar-wrap{
            .user-avatar{
                width: 50%;

            }
        }
        .hang-up-icon-wrap{
            .hang-up-icon{
                padding-top: 15%;
                img{
                    width: 36%;
                    cursor: pointer;
                }
                line-height: 36px;

            }
        }


    }

    //收到呼叫模块
    #handle-calling-module{
        position: absolute;
        left:0;
        top:0;
        z-index: 9;
        background: white;
        height: 100%;
        width: 280px;
        padding: 10px 20px;
        box-sizing: border-box;
        text-align: center;

        .cur-calling-user{
            padding-top: 15%;
            padding-bottom: 10%;
            font-weight: normal;




        }
        .calling-text{
            padding-top: 8%;
            padding-bottom: 3%;
            font-size: 20px;
            line-height: 36px;
        }
        .calling-flash{
            padding-top: 18%;
            padding-bottom: 8%;
        }

        .user-avatar-wrap{
            .user-avatar{
                width: 50%;

            }
        }
        .hang-up-and-accept{
            ul{
                li{
                    width: 50%;
                    .hang-up-icon{
                        cursor: pointer;
                        padding-top: 15%;
                        img{
                            width: 50%;
                        }
                        line-height: 36px;

                    }
                }
            }

        }
        .hang-up-icon-wrap{
            .hang-up-icon{
                cursor: pointer;
                padding-top: 15%;
                img{
                    width: 36%;
                }
                line-height: 36px;

            }
        }


    }

    //正在通话模块
    #chatting-module{
        position: absolute;
        left:0;
        top:0;
        z-index: 9;
        background: url('./images/transparency-bg.png') repeat;
        height: 100%;
        width: 280px;
        padding: 10px 20px;
        box-sizing: border-box;
        text-align: center;
        transition: all 3s;
        -moz-transition: all 3s;
        -webkit-transition: all 3s;
        -o-transition:all 3s;


        .hang-up-and-muted{
            position: absolute;
            left:0;
            bottom:0;
            z-index: 99;
            width: 100%;
            ul{
                padding-bottom: 20%;
                li{
                    overflow: hidden;
                    .muted-wrap,.hang-up-wrap{
                        cursor: pointer;
                        padding-top: 15%;
                        color:white;
                        margin-left: 25%;

                        img{
                            height: 84px;

                            float:left;
                        }
                        span{
                            line-height: 84px;
                            float:left;
                            padding-left: 15px;
                        }
                    }


                }
            }

        }



    }
    //联系人列表
    #contacts{
        position: absolute;
        left:0;
        top:0;
        z-index: 9;
        background: white;

        width: 280px;
        overflow-y: scroll;
        height: 100%;

        padding: 10px 20px;
        box-sizing: border-box;

        .title{
            text-align: center;
            font-weight: normal;
        }
        .search{
            border-bottom: 1px solid #dcdcdc;
            background: url("./images/search_icon.png") no-repeat 95% 10px;

            input{
                width: 100%;
                opacity: 1;
                box-sizing: border-box;

                line-height: 32px;
                color:black;
                border:none;
                background: none;
                box-shadow: none;
                padding: 5px;
                outline: none;

            }
            input:focus{
                border:none;
                background: none;
                box-shadow: none;
                outline: none;
            }
        }
        .invite-title{
            color:#90979d;
            font-weight: normal;
            margin: 0;

            padding-top: 20px;
        }
        .contacts-ul{
            padding-top: 20px;


            .contacts-li{
                overflow: hidden;
                padding-bottom: 20px;
                .user_icon{
                    width: 50px;
                }
                .name-and-phone{
                    padding: 0 20px;
                    padding-right: 30px;
                    .name{
                        display: block;
                        font-weight: normal;
                        line-height: 30px;
                    }
                    .phone{
                        display:block;
                        color:#646464;
                    }
                }
                .installed_icon{
                    padding-top: 15px;
                    width: 25px;
                }
                .invite{
                    color:#0497eb;
                    line-height: 50px;
                    cursor: pointer;
                }

            }
        }

    }


    .remoteVideo{
        position: absolute;
        right:10px;
        top:10px;
        z-index: 9;
        background: black;
        border-radius: 5px;
        border: 1px solid #ccc;
        width: 320px;
        height: 240px;
        transform:scale(-1,1);
    }

    #calling{
        position: absolute;
        left:0;
        top:0;
        z-index: 9;
    }
}

#sendreceive {
    margin: 0 0 20px 0;
    position: absolute;
    bottom: 10px;
    right: 10px;

    width: 300px;
    background: beige;
    border:1px solid gray;
    //display: none;
}


#login_page{
    background: url("./images/login_bg.jpg");
    height: 100%;
    background-size: cover;
    position: relative;
    footer{
        position: absolute;
        bottom:0;
        text-align: center;
        width: 100%;
        left:0;
        width: 100%;

        color:#e7e5e9;
        padding-bottom: 20px;
        font-size:14px;
    }
    .login_main{
        width: 30%;
        margin: 0 auto;
        .logo_wrap{
            text-align: center;
            padding: 60px 0;
            img{
                max-width: 30%;
            }
        }
        .phone_number_wrap{
            padding: 20px 0;
            .phone_number{
                width:100%;
                line-height: 30px;
                padding: 5px;
                display: block;
                border: 1px solid #41b2f4;
                box-sizing: border-box;
                background: none;
                text-align: center;
                color:white;
            }



        }
        .login_btn_wrap{
            .login_btn{
                width:100%;
                display: block;
                padding: 5px;
                line-height: 30px;
                background: #41b2f4;
                border:none;
                color:white;
            }
        }
    }
}

.refused{
    position: absolute;
    left:280px;
    top:0;
    z-index: 99;
    right:0;
    background: url('./images/blue_transparency.png') repeat;

    text-align: center;
    color:white;
    padding: 10px;

    transition: all 3s;
    -moz-transition: all 3s;
    -webkit-transition: all 3s;
    -o-transition:all 3s;

}
.close-remind-btn{
    color:white;
    cursor: pointer;
    img{
        width: 13px;
        margin-right: 10px;
    }
}